{% extends '../base.html' %}

{% block content %}
<div class="center_div">
    <center>
        <button onclick="start()" id="start_btn">开始</button>
        <br><br>
        <canvas id="myCanvas" width="400" height="400" style="border:1px solid #c3c3c3;"></canvas>
        <br><br>
    </center>
</div>

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var time = 60 ; //蛇的速度
var cxt=c.getContext("2d");
var x = y = 8;
var a = 0; //食物坐标
var t = 1; //舍身长
var map = []; //记录蛇运行路径
var size = 8; //蛇身单元大小
var direction = 2; // 1 向上 2 向右 0 左 3下

var game_over = false

function start() {
    interval = window.setInterval(set_game_speed, time); // 移动蛇
    $('#start_btn').hide()
}

function set_game_speed(){ // 移动蛇
    if(!game_over){
        switch(direction){
            case 1:y = y-size;break;
            case 2:x = x+size;break;
            case 0:x = x-size;break;
            case 3:y = y+size;break;
        }
        if(x>400 || y>400 || x<0 || y<0){
            game_over = true
            alert("游戏结束！");
            $.post('/game/submit/score', {'score': t, 'game_id': '{{ game.id }}'}, function (data) {
                if(data.success){
                    window.location.reload();
                }
            })
            return false;
        }
        for(var i=0;i<map.length;i++){
            if( parseInt(map[i].x)==x && parseInt(map[i].y)==y){
                game_over = true
                alert("游戏结束！");
                $.post('/game/submit/score', {'score': t, 'game_id': '{{ game.id }}'}, function (data) {
                    if(data.success){
                        window.location.reload();
                    }
                })
                return false;
            }
        }
        if (map.length>t) { //保持舍身长度
        var cl = map.shift(); //删除数组第一项，并且返回原元素
        cxt.clearRect(cl['x'], cl['y'], size, size);
        };
        map.push({'x':x,'y':y}); //将数据添加到原数组尾部
        cxt.fillStyle = "#006699";//内部填充颜色
        cxt.strokeStyle = "#006699";//边框颜色
        cxt.fillRect(x, y, size, size);//绘制矩形
        if((a*8)==x && (a*8)==y){ //吃食物
        rand_frog();t++;
        }
    }

}

document.onkeydown = function(e) { //改变蛇方向
    var code = e.keyCode - 37;
    switch(code){
        case 1 : direction = 1;break;//上
        case 2 : direction = 2;break;//右
        case 3 : direction = 3;break;//下
        case 0 : direction = 0;break;//左
    }
}

// 随机放置食物
function rand_frog(){
    a = Math.ceil(Math.random()*50);
    cxt.fillStyle = "#000000";//内部填充颜色
    cxt.strokeStyle = "#000000";//边框颜色
    cxt.fillRect(a*8, a*8, 8, 8);//绘制矩形
}
// 随机放置食物
rand_frog();
</script>
{% endblock %}
